<script lang="jsx">
/**
 * @author lilinjie
 * @Description:
 */

import { defineComponent, onMounted, ref } from 'vue'
import { useList } from '@/hooks/common/useList'
import { useCuModal } from '@/hooks/common/useCuModal'
import { addOrder, deleteOrder, getAllOrder, getOrderDetail, searchOrder } from '@/api/order'
import {
  columns,
  orderPayTypeMap,
  orderPlyWayMap,
  orderStatusColorMap,
  orderStatusFilter,
  orderStatusMap
} from '@/config/order'
import { useProvideData } from '@/context/order'
import OrderModal from './modal.vue'
import { formatTime } from '@/utils/time'

export default defineComponent({
  name: 'Order',
  setup() {
    // 表单部分
    const {
      filterForm,
      clearForm,
      handleSearch,
      tableData,
      pagination,
      handleCurrentChange,
      handleSizeChange
    } = useList({
      defaultFilterForm: {
        orderNum: null,
        orderStatus: null,
        payType: null
      },
      getList: ({ onSuccess }) => {
        searchOrder({ ...filterForm, ...pagination }).then(res => {
          onSuccess({
            list: {
              orderInfo: res.data.list?.map((item, index) => ({
                    ...item.orderInfo,
                    index: index + 1,
                    key: index
                  })
              ),
              userAddress: res.data.list?.map((item, index) => ({
                ...item.userAddress,
                key: index
              }))
            },
            total: res.data.total
          })
        })
      }
    })

    // 弹窗部分
    const {
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    } = useCuModal({
      defaultCuFilterForm: {
        userId: undefined,
        orderNum: undefined,
        totalAmount: undefined,
        orderStatus: undefined,
        paymentTime: undefined,
        remark: undefined
      },
      create({ cuFilterForm, onSuccess }) {
        console.log('create', cuFilterForm)
        addOrder(cuFilterForm).then(res => {
          console.log(res)
          onSuccess()
          handleSearch()
        })
      },
      update({ cuFilterForm, currentId, onSuccess }) {
        console.log('update', cuFilterForm)
        onSuccess()
        handleSearch()
      }
    })

    // 提供上下文
    useProvideData({
      cuFilterForm,
      modelData,
      isEdit,
      onClickClose,
      onClickConfirm,
      onClickCreate,
      onClickEdit,
      onClickView
    })

    onMounted(() => {
      handleSearch()
    })

    const onClickDelete = (id) => {
      console.log(id)
      deleteOrder(id).then(res => {
        handleSearch()
        console.log(res)
      })
    }

    const data = ref({})

    return () => {
      const tableSlot = {
        bodyCell: ({ text, record, index, column }) => {
          // console.log(record, index, column)
          if (column.dataIndex === 'action') {
            return <a-space>
              <a-button type="link" size="small" onClick={() => {
                console.log(record)
                data.value = record
                onClickView(record)
              }}
              >查看
              </a-button>
            </a-space>
          }

          if (column.dataIndex === 'paymentTime') {
            return <span>{formatTime(text)}</span>
          }

          if (column.dataIndex === 'orderStatus') {
            return <span class="status" style={{ backgroundColor: orderStatusColorMap[text] }}>{orderStatusMap[record.orderStatus]}</span>
          }

          if (column.dataIndex === 'payType') {
            console.log(record)
            return <span>{orderPayTypeMap[record.payType]}</span>
          }
        }
      }

      return (
          <div class="product">
            <div class="header">
              <a-form class="form" layout="inline">
                <a-form-item label="订单编号">
                  <a-input placeholder="请输入订单编号" onChange={handleSearch} vModel:value={filterForm.orderNum} />
                </a-form-item>
                <a-form-item label="订单状态">
                  <a-select placeholder="请输入订单状态" options={orderStatusFilter} style={{ width: '150px' }} onChange={handleSearch} vModel:value={filterForm.orderStatus} />
                </a-form-item>
                <a-form-item label="支付方式">
                  <a-select placeholder="请输入支付方式" options={orderPlyWayMap} style={{ width: '150px' }} onChange={handleSearch} vModel:value={filterForm.payType} />
                </a-form-item>
                <a-space>
                  <a-button onClick={() => {
                    clearForm()
                    handleSearch()
                  }}
                  >重置
                  </a-button>
                  <a-button onClick={handleSearch}>查询</a-button>
                </a-space>
              </a-form>
              {/** <a-button type="primary" onClick={onClickCreate}>新增</a-button> */}
            </div>
            <a-table class="table"
                     columns={columns}
                     dataSource={tableData?.data.list?.orderInfo}
                     v-slots={tableSlot}
            />
            <OrderModal data={data.value}/>
          </div>
      )
    }
  }
})
</script>

<style lang="less">
@import '@/assets/less/common-style.less';

.product {
  .header {
    .flex(space-between);

    .ant-btn-primary {
      margin-right: 50px;
    }
  }

  .table {
    padding: 0 24px;
    height: calc(100vh - @nav-bar-height - 60px);
    overflow: auto;
  }

  .form {
    margin: 20px 50px;
  }

  .status {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    margin-right: 10px;

    line-height: 20px;
    padding: 2px 10px;
    text-align: center;
    border-radius: 8px;
  }
}
</style>
